<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>汽车账单列表</title>
    <link href="css/dataroot.css" rel="stylesheet">
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <h2>管理员后台</h2>
    <ul>
        <li class="active" onclick="showPage('carListPage')">汽车账单列表</li>
        <li onclick="showPage('userStatsPage')">员工账单页面</li>
    </ul>
</div>

<!-- 主内容区域 -->
<div class="main-content">
    <!-- 汽车账单列表页面 -->
    <div id="carListPage">
        <div class="admin-header">
            <h2>汽车账单列表</h2>
            <div class="user-info">
                <img alt="管理员头像" src="images/favicon.ico">
                <span>管理员</span>
            </div>
        </div>
        <div class="container">
            <div class="search-box">
                <!-- 搜索功能和筛选条件 -->
                <div>
                    <label for="storage">仓库：</label>
                    <select id="storage">
                        <option value="">全部仓库</option>
                        <option value="1">西安仓库</option>
                        <option value="2">北京仓库</option>
                        <option value="3">上海仓库</option>
                    </select>
                </div>
                <div>
                    <label for="cname">汽车名称：</label>
                    <input id="cname" placeholder="请输入汽车名称" type="text">
                </div>
                <div>
                    <label for="creator">创建人：</label>
                    <input id="creator" placeholder="请输入创建人" type="text">
                </div>
                <div>
                    <label for="status">状态：</label>
                    <select id="status">
                        <option value="">全部状态</option>
                        <option value="未售出">未售出</option>
                        <option value="已售出">已售出</option>
                    </select>
                </div>
                <div>
                    <label for="startTime">起始时间：</label>
                    <input id="startTime" type="date">
                </div>
                <div>
                    <label for="endTime">结束时间：</label>
                    <input id="endTime" type="date">
                </div>
                <div>
                    <button id="searchBtn">查询</button>
                </div>

                <div class="batch-insert">
                    <h3>批量操作</h3>
                    <div>
                        <label for="batchCids">输入账单号</label>
                        <input id="batchCids" placeholder="例如：1,2,3" type="text">
                    </div>
                    <button id="batchInsertBtn">确认</button>
                </div>

                <div class="message-box" id="batchInsertMessage"></div>
            </div>

            <table>
                <thead>
                <tr>
                    <th data-sort-field="cid" onclick="sortTable('cid')">账单号</th>
                    <th>汽车名称</th>
                    <th>颜色</th>
                    <th>价格</th>
                    <th>仓库</th>
                    <th data-sort-field="time" onclick="sortTable('time')">时间</th>
                    <th>状态</th>
                    <th>创建人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="carList">
                <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>

            <div class="error-message" id="errorMessage"></div>
            <div class="no-data-message" id="noDataMessage"></div>

            <div class="pagination" id="pagination">
                <!-- 分页将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <!-- 员工账单页面 -->
    <div id="userStatsPage" style="display: none;">
        <div class="admin-header">
            <h2>员工账单统计</h2>
            <div class="user-info">
                <img alt="管理员头像" src="images/favicon.ico">
                <span>管理员</span>
            </div>
        </div>
        <div class="container">
            <h3>员工账单统计</h3>
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>创建人</th>
                    <th>账单完成个数</th>
                    <th>账单完成率</th>
                    <th>车辆售出数</th>
                    <th>收益总数</th>
                </tr>
                </thead>
                <tbody id="userStatsList">
                <!-- 数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="jsjs/dataroot.js"></script>
</body>
</html>